<template>
  <div>
    <div v-if="!buttonEdit && !isResApprovel" class="text-right mb-2">
      <el-button size="small" icon="el-icon-printer" @click="handlePrint">打印</el-button>
    </div>
    <div :id="printId" v-loading="loading">
      <h5 class="text-center">项目审批表 （权限外）</h5>
      <table class="table table-sm table-bordered vertical-align-middle text-center">
        <colgroup>
          <col width="20%" />
          <col width="15%" />
          <col width="15%" />
          <col width="20%" />
          <col width="30%" />
        </colgroup>

        <tbody>
          <tr>
            <td>借款人名称</td>
            <td colspan="2">{{ related.customer_name || '' }}</td>
            <td>法定代表人</td>
            <td>{{ related.corp_name }}</td>
          </tr>
          <tr>
            <td>申请金额</td>
            <td colspan="2">{{ related.apply_funds || '' }}万元</td>
            <td>申请期限</td>
            <td>{{ related.load_years || '' }}年</td>
          </tr>
          <tr>
            <td>贷款银行</td>
            <td colspan="2">{{ related.bank_name }}</td>
            <td>贷款利率（年）</td>
            <td class="report-input-td">{{ related.load_rate || '-' }}%</td>
          </tr>
          <tr>
            <td>审批金额</td>
            <td colspan="2" class="report-input-td">{{ data.res_funds }}</td>
            <td>期限</td>
            <td class="report-input-td">{{ related.approval_load_years || '-' }}年</td>
          </tr>
          <tr>
            <td>担保费率</td>
            <td colspan="2" class="report-input-td">{{ related.gua_rate || '-' }}%</td>
            <td>评审费</td>
            <td class="report-input-td">{{ related.approval_fee || '-' }}元</td>
          </tr>
          <tr>
            <td>资金用途</td>
            <td colspan="4" class="text-left">
              <div class="text-indent p-2">{{ related.funds_use_dir }}</div>
            </td>
          </tr>
          <tr>
            <td>项目基本介绍</td>
            <td colspan="4" class="text-left">
              <div class="text-indent p-2">{{ related.project_des || '-' }}</div>
            </td>
          </tr>
          <tr>
            <td>反担保措施</td>
            <td colspan="4" class="report-input-td text-left">
              <div class="text-indent p-2">{{ related.counter_guarantee || '-' }}</div>
            </td>
          </tr>
          <tr>
            <td>项目主审</td>
            <td colspan="2">{{ related.res_a_name }}</td>
            <td>项目辅审</td>
            <td>{{ related.res_b_name }}</td>
          </tr>
          <tr>
            <td :rowspan="5">农业担保部</td>
            <td>项目经理意见</td>
            <td colspan="3" class="text-left">
              <div>{{ related.res_option || '' }}</div>
              <div
                v-if="+related.res_status !== 0"
                class="d-flex justify-content-between pt-2 approval-opinion"
              >
                <div>签字：{{ related.res_person }}</div>
                <div class="w-50">日期：{{ related.res_date | toDate }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>业务部主管意见</td>
            <td colspan="3" class="text-left">
              <div>{{ related.res_option_bus || '' }}</div>
              <div
                v-if="+related.res_status_bus !== 0"
                class="d-flex justify-content-between pt-2 approval-opinion"
              >
                <div>签字：{{ related.res_person_bus }}</div>
                <div class="w-50">日期：{{ related.res_date_bus | toDate }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>风控员意见</td>
            <td colspan="3" class="text-left">
              {{ related.res_option_risk_point || '' }}
              <div
                v-if="+related.res_status_risk_point !== 0"
                class="d-flex justify-content-between pt-2 approval-opinion"
              >
                <div>签字：{{ related.res_person_risk_point }}</div>
                <div class="w-50">日期：{{ related.res_date_risk_point | toDate }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>风控部主管意见</td>
            <td colspan="3" class="text-left">
              <div>{{ related.res_option_risk || '' }}</div>
              <div
                v-if="+related.res_status_risk !== 0"
                class="d-flex justify-content-between pt-2 approval-opinion"
              >
                <div>签字：{{ related.res_person_risk }}</div>
                <div class="w-50">日期：{{ related.res_date_risk | toDate }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>有权审批人意见</td>
            <td colspan="3" class="text-left">
              <div>{{ related.res_option_corp || '' }}</div>
              <div
                v-if="+related.res_status_corp !== 0"
                class="d-flex justify-content-between pt-2 approval-opinion"
              >
                <div>签字：{{ related.res_person_corp }}</div>
                <div class="w-50">日期：{{ related.res_date_corp | toDate }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>业务部A角意见</div>
              <div>（省担保公司）</div>
            </td>
            <td colspan="2" class="report-input-td text-left">
              <div v-if="baseInfoView || !isAbApproval" class="px-2 pt-2 approval-opinion">
                {{ related.city_res_option || '' }}
                <div
                  v-if="+related.city_res_status !== 0"
                  class="d-flex justify-content-between pt-2"
                >
                  <div>签字：{{ related.city_res_a_name }}</div>
                  <div class="w-50">日期：{{ related.city_res_date | toDate }}</div>
                </div>
              </div>
              <div v-else>
                <textarea rows="4" class="form-control" v-model="data.city_res_option"></textarea>
                <div class="sign-bottom px-2 d-flex justify-content-between pt-2">
                  <div>签字：{{ userName }}</div>
                  <div class="w-50">日期：{{ new Date() | toDate }}</div>
                </div>
              </div>
            </td>
            <td>
              <div>风控员意见</div>
              <div>（省担保公司）</div>
            </td>
            <td class="report-input-td text-left">
              <div v-if="baseInfoView || !isRiskStaff" class="px-2 pt-2 approval-opinion">
                {{ related.city_res_option_risk_point || '' }}
                <div
                  v-if="+related.city_res_status_risk_point !== 0"
                  class="d-flex justify-content-between pt-2"
                >
                  <div>签字：{{ related.city_res_person_risk_point }}</div>
                  <div class="w-50">日期：{{ related.city_res_date_risk_point | toDate }}</div>
                </div>
              </div>
              <div v-else>
                <textarea
                  rows="4"
                  class="form-control"
                  v-model="data.city_res_option_risk_point"
                ></textarea>
                <div class="sign-bottom px-2 d-flex justify-content-between pt-2">
                  <div>签字：{{ userName }}</div>
                  <div>日期：{{ new Date() | toDate }}</div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div>业务部主管意见</div>
              <div>（省担保公司）</div>
            </td>
            <td colspan="2" class="report-input-td text-left">
              <div v-if="baseInfoView || !isBusApproval" class="px-2 pt-2 approval-opinion">
                {{ related.city_res_option_bus || '' }}
                <div
                  v-if="+related.city_res_status_bus !== 0"
                  class="d-flex justify-content-between pt-2"
                >
                  <div>签字：{{ related.city_res_person_bus }}</div>
                  <div class="w-50">日期：{{ related.city_res_date_bus | toDate }}</div>
                </div>
              </div>
              <div v-else>
                <textarea
                  rows="4"
                  class="form-control"
                  v-model="data.city_res_option_bus"
                ></textarea>
                <div class="sign-bottom px-2 d-flex justify-content-between pt-2">
                  <div>签字：{{ userName }}</div>
                  <div class="w-50">日期：{{ new Date() | toDate }}</div>
                </div>
              </div>
            </td>
            <td>
              <div>风控部主管意见</div>
              <div>（省担保公司）</div>
            </td>
            <td class="report-input-td text-left">
              <div v-if="baseInfoView || !isRiskManage" class="px-2 pt-2 approval-opinion">
                {{ related.city_res_option_risk || '' }}
                <div
                  v-if="+related.city_res_status_risk !== 0"
                  class="d-flex justify-content-between pt-2"
                >
                  <div>签字：{{ related.city_res_person_risk }}</div>
                  <div class="w-50">日期：{{ related.city_res_date_risk | toDate }}</div>
                </div>
              </div>
              <div v-else>
                <textarea
                  rows="4"
                  class="form-control"
                  v-model="data.city_res_option_risk"
                ></textarea>
                <div class="sign-bottom px-2 d-flex justify-content-between pt-2">
                  <div>签字：{{ userName }}</div>
                  <div class="w-50">日期：{{ new Date() | toDate }}</div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td :rowspan="reviewData.length + 2">
              <div>审批委员会意见</div>
              <div>（省担保公司）</div>
            </td>
            <td colspan="4" v-if="!reviewData.length"></td>
          </tr>
          <tr v-for="(item, index) of reviewData" :key="index">
            <td class="text-left">委员:&nbsp;&nbsp;&nbsp;&nbsp;{{ item.approval_person_name }}</td>
            <td colspan="3" class="report-input-td text-left">
              <div class="bg-input p-2" v-if="item.approval_person === userId && isResApprovel">
                <c-radio-group
                  :options="enumReviewType"
                  v-model="item.approval_status"
                ></c-radio-group>
                <div v-if="+item.approval_status !== 1" class="border rounded mt-2 w-75">
                  <el-input v-model="item.approval_option" placeholder="请填写意见"></el-input>
                </div>
                <div class="d-flex justify-content-between pt-2">
                  <div>签字：{{ userName }}</div>
                  <div class="w-50">日期：{{ newDate | toDate }}</div>
                </div>
              </div>
              <div v-else class="px-2 pt-2 approval-opinion">
                {{ enumReviewType[item.approval_status] || '' }}
                {{
                  item.approval_status && +item.approval_status !== 1
                    ? `：${item.approval_option || ''}`
                    : ''
                }}
                <div v-if="+item.approval_status !== 0" class="d-flex justify-content-between pt-2">
                  <div>签字：{{ item.approval_person_name }}</div>
                  <div class="w-50">日期：{{ item.approval_time | toDate }}</div>
                </div>
              </div>
              <!-- <el-button @click="deleteApprove(item.review_approval_id)">删除</el-button> -->
            </td>
          </tr>
          <tr>
            <td colspan="5" class="p-2 text-left">
              <div class="d-flex">
                <div class="pr-3">结果：</div>
                <div class="flex-1">
                  参会委员人数{{ approvalResult.total }}人; 有效投票人{{
                    approvalResult.validTotal
                  }}人。
                  <div>
                    同意票{{ approvalResult.agreeTotal }}张；否决票{{
                      approvalResult.vetoTotal
                    }}张；复议票{{ approvalResult.resTotal }}张；有条件同意票{{
                      approvalResult.conditionTotal
                    }}张。
                  </div>
                  <!-- 其中同意票数大于有效票数的1/2，审批同意通过。 -->
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>审批委员会主任</td>
            <td colspan="5" class="report-input-td text-left">
              <div v-if="baseInfoView || !isAuthorizedPerson" class="px-2 pt-2 approval-opinion">
                {{ related.city_res_option_corp || '' }}
                <div
                  class="d-flex justify-content-between"
                  v-if="+related.city_res_status_corp !== 0"
                >
                  <div>签字：{{ related.city_res_person_corp }}</div>
                  <div class="w-50">日期：{{ related.city_res_date_corp | toDate }}</div>
                </div>
              </div>
              <div v-else>
                <textarea
                  rows="4"
                  class="form-control"
                  v-model="data.city_res_option_corp"
                ></textarea>
                <div class="p-2 d-flex justify-content-between sign-bottom">
                  <div>签字：{{ userName }}</div>
                  <div class="w-50">日期：{{ new Date() | toDate }}</div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="text-center">
        <div v-if="buttonEdit">
          <el-button class="btn-long" type="primary" @click="handlePass">通过</el-button>
          <el-button class="btn-long" type="danger" @click="handleReject">不通过</el-button>
        </div>
        <div v-else-if="isResApprovel">
          <el-button class="btn-long" type="primary" :loading="submitLoading" @click="handleSave">
            保存
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { printA4, nzhToMoney } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
import { dateFormat } from '@/common/utils/common'
import { getStaff } from '@/common/api/auth'

export default {
  props: {
    queryId: String,
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      enumReviewType: {
        1: '同意',
        2: '否决',
        3: '复议',
        4: '有条件同意',
      },
      loading: false,
      tableName: 'customer_related',
      related: {},
      newDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      data: {
        res_funds: '',
        counter_guarantee: '',

        city_res_a_name: '',
        city_res_option: '',
        city_res_date: '',
        city_res_status: 0,

        city_res_person_risk_point: '',
        city_res_status_risk_point: 0,
        city_res_option_risk_point: '',
        city_res_date_risk_point: '',

        city_res_person_risk: '',
        city_res_status_risk: 0,
        city_res_option_risk: '',
        city_res_date_risk: '',

        city_res_date_bus: '',
        city_res_option_bus: '',
        city_res_person_bus: '',
        city_res_status_bus: 0,

        city_res_option_corp: '',
        city_res_status_corp: 0,
        city_res_person_corp: '',
        city_res_date_corp: '',
      },
      reviewData: [],
      reviewTableName: 'review_approval',
      submitLoading: false,
      authorizedPerson: '',
      approvalResult: {
        total: 0,
        validTotal: 0,
        agreeTotal: 0,
        vetoTotal: 0,
        resTotal: 0,
        conditionTotal: 0,
      },
    }
  },
  computed: {
    ...mapGetters(['user', 'userId', 'job']),
    // 是否是ab角审批
    userName() {
      return this.user.realName
    },
    isRefuse() {
      const keys = [
        'res_status',
        'res_status_bus',
        'res_status_risk_point',
        'city_res_status',
        'city_res_status_risk_point',
        'city_res_status_risk',
        'city_res_status_bus',
      ]
      for (let key of keys) {
        if (+this.related[key] === 2) {
          return true
        }
      }
      return false
    },
    isAbApproval() {
      return this.userId === this.related.city_res_a && !this.isResApprovel && !this.isResFinish
    },
    isRiskStaff() {
      return (
        this.userId === this.related.city_res_user_id_risk_point &&
        !this.isResApprovel &&
        !this.isResFinish
      )
    },
    isBusApproval() {
      return (
        +this.related.city_res_status === 1 &&
        this.job === 'org_c_manage' &&
        !this.isResApprovel &&
        !this.isResFinish
      )
    },
    isRiskManage() {
      return (
        +this.related.city_res_status_risk_point === 1 &&
        this.job === 'org_r_manage' &&
        !this.isResApprovel &&
        !this.isResFinish
      )
    },
    baseInfoView() {
      return this.viewMode || this.isRefuse || +this.related.res_status_corp !== 1
    },
    isResPerson() {
      return +this.user.isApprovalRep === 1
    },
    isResFinish() {
      return +this.related.review_approval === 2
    },
    isResApprovel() {
      return (
        !this.isResFinish &&
        !this.baseInfoView &&
        +this.related.city_res_status_risk === 1 &&
        +this.related.city_res_status_bus === 1 &&
        this.isResPerson
      )
    },
    isAuthorizedPerson() {
      return (
        this.userId === this.authorizedPerson &&
        +this.related.city_res_status_corp === 0 &&
        this.isResFinish
      )
    },
    buttonEdit() {
      return (
        !this.baseInfoView &&
        (this.isAbApproval || this.isRiskStaff || this.isBusApproval || this.isAuthorizedPerson)
      )
    },
    printId() {
      return `investigate-out-approve-${this.queryId}`
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getRelatedData() // 任务里面没有返回审批的大量字段需自己重新请求
      },
      immediate: true,
    },
  },
  created() {
    this.getResPerson()
  },
  methods: {
    deleteApprove(id) {
      this.$api.deleteData(this.$serviceName, this.reviewTableName, id)
    },
    getReviewData() {
      if (+this.related.review_approval === 2) {
        this.getReviewList().then(res => {
          this.reviewData = (res && res.data) || []
          this.setCount(this.reviewData)
        })
      } else {
        Promise.all([this.getResPerson(), this.getReviewList()]).then(([person, res2]) => {
          const reviewList = (res2 && res2.data) || []
          this.reviewData = person
            .map(item => {
              const approvalRow = reviewList.find(row => row.approval_person === item.userId) || {}
              const edit = item.userId === this.userId && this.isResApprovel
              const obj = approvalRow.review_approval_id
                ? {
                    approval_time: approvalRow.approval_time || '',
                    review_approval_id: approvalRow.review_approval_id,
                  }
                : {}
              return {
                approval_person: approvalRow.approval_person || item.userId,
                approval_person_name: approvalRow.approval_person_name || item.realName,
                review_approval_batch_id: approvalRow.review_approval_batch_id || this.queryId,
                approval_status: approvalRow.approval_status || (edit ? '1' : ''),
                approval_option: approvalRow.approval_option || '',
                ...obj,
              }
            })
            .sort((a, b) => b.approval_status - a.approval_status)
          this.setCount(reviewList)
        })
      }
    },
    getResPerson() {
      return getStaff().then(res => {
        const data = (res && res.data) || []
        const person = data.find(item => +item.isAuthorizedPerson === 1) || {}
        const corp = data.find(item => item.job === 'org_corp') || {}
        if (person.userId) {
          this.authorizedPerson = person.userId
        } else {
          this.authorizedPerson = corp.userId
        }
        return data.filter(it => +it.isApprovalRep === 1)
      })
    },
    setCount(data) {
      this.approvalResult = {
        total: 0,
        validTotal: 0,
        agreeTotal: 0,
        vetoTotal: 0,
        resTotal: 0,
      }
      let agreeTotal = 0
      let vetoTotal = 0
      let resTotal = 0
      let conditionTotal = 0
      let validTotal = 0
      data.forEach(item => {
        if (item.approval_status) {
          validTotal++
        }
        if (+item.approval_status === 1) {
          agreeTotal++
        } else if (+item.approval_status === 2) {
          vetoTotal++
        } else if (+item.approval_status === 3) {
          resTotal++
        } else if (+item.approval_status === 4) {
          conditionTotal++
        }
      })
      this.approvalResult.total = this.reviewData.length
      this.approvalResult.validTotal = validTotal
      this.approvalResult.agreeTotal = agreeTotal
      this.approvalResult.vetoTotal = vetoTotal
      this.approvalResult.resTotal = resTotal
      this.approvalResult.conditionTotal = conditionTotal
    },
    getReviewList() {
      return this.$api.getData(
        this.$serviceName,
        this.reviewTableName,
        {
          'review_approval_batch_id.eq': this.queryId,
        },
        {
          approval_time: 'asc',
        }
      )
    },
    validator() {
      if (!this.data.counter_guarantee) {
        this.$message.error('请输入反担保措施！')
        return false
      }
      return true
    },
    validatorOption() {
      if (this.isAbApproval && !this.data.city_res_option) {
        this.$message.warning('请输入业务员意见')
        return false
      }
      if (this.isRiskStaff && !this.data.city_res_option_risk_point) {
        this.$message.warning('请输入风控员意见')
        return false
      }
      if (this.isRiskManage && !this.data.city_res_option_risk) {
        this.$message.warning('请输入风控主管意见')
        return false
      }
      if (this.isBusApproval && !this.data.city_res_option_bus) {
        this.$message.warning('请输入业务主管意见')
        return false
      }
      return true
    },
    setOptionStatus(status) {
      this.newDate = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      if (this.isAbApproval) {
        this.data.city_res_a_name = this.userName
        this.data.city_res_date = this.newDate
        this.data.city_res_status = status
      }
      if (this.isRiskStaff) {
        this.data.city_res_person_risk_point = this.userName
        this.data.city_res_date_risk_point = this.newDate
        this.data.city_res_status_risk_point = status
      }
      if (this.isRiskManage) {
        this.data.city_res_person_risk = this.userName
        this.data.city_res_date_risk = this.newDate
        this.data.city_res_status_risk = status
      }
      if (this.isBusApproval) {
        this.data.city_res_person_bus = this.userName
        this.data.city_res_date_bus = this.newDate
        this.data.city_res_status_bus = status
      }
      if (this.isAuthorizedPerson) {
        this.data.city_res_date_corp = this.newDate
        this.data.city_res_status_corp = status
        this.data.city_res_person_corp = this.userName
      }
    },
    handleReject() {
      if (!this.validatorOption()) return
      this.setOptionStatus(2)
      const data = {}
      Object.keys(this.data).forEach(key => {
        if (this.data[key]) {
          data[key] = this.data[key]
        }
      })
      this.$utils
        .msgbox({
          message: `确定拒绝项目：${this.related.customer_name}?`,
          type: 'error',
          beforeClose: () => this.updateData(data),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', true)
        })
        .catch(() => this.$message.error('操作失败，请重试！'))
    },
    updateData(data) {
      return this.$api.updateData(this.$serviceName, this.tableName, this.queryId, data)
    },
    updateReviewData(id, data) {
      return this.$api.updateData(this.$serviceName, this.reviewTableName, id, data)
    },
    postReviewData(data) {
      return this.$api.addData(this.$serviceName, this.reviewTableName, data)
    },
    handleSave() {
      let putData = {}
      let postData = {}
      let i = 0
      this.reviewData.forEach(item => {
        if (item.approval_person === this.userId) {
          item.approval_time = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
          if (item.review_approval_id) {
            putData = {
              approval_time: item.approval_time,
              approval_status: item.approval_status,
              approval_person_name: this.userName,
              approval_option: item.approval_option || '',
              review_approval_id: item.review_approval_id,
              review_approval_batch_id: item.review_approval_batch_id,
            }
          } else {
            postData = { ...item }
          }
        }
        if (+item.approval_status) {
          i++
        }
      })

      const reviewStatus = i === this.reviewData.length ? 2 : 1
      if (!postData.approval_person && !putData.review_approval_id) {
        return
      }
      this.submitLoading = true
      if (putData.review_approval_id) {
        Promise.all([this.updateReviewData(putData.review_approval_id, putData)])
          .then(() => {
            this.$message.success('保存成功！')
            this.$emit('success', true)
          })
          .finally(() => {
            this.submitLoading = false
          })
      } else {
        Promise.all([
          this.postReviewData(postData),
          this.updateData({ review_approval: reviewStatus }),
        ])
          .then(() => {
            this.$message.success('保存成功！')
            this.getReviewData()
            if (reviewStatus === 2) {
              this.getRelatedData()
            }
            this.$emit('success', true)
          })
          .finally(() => {
            this.submitLoading = false
          })
      }
    },
    handlePass() {
      if (!this.validator() || !this.validatorOption()) return
      this.setOptionStatus(1)
      const data = {}
      Object.keys(this.data).forEach(key => {
        if (this.data[key]) {
          data[key] = this.data[key]
        }
      })
      this.submitLoading = true
      this.updateData(data)
        .then(() => {
          if (this.isAuthorizedPerson) {
            this.sendLetter()
          }
          this.$message.success('操作成功！')
          this.$emit('success', true)
        })
        .catch(() => this.$message.error('操作失败，请重试！'))
        .finally(() => {
          this.submitLoading = false
        })
    },
    sendLetter() {
      const data = {
        gua_org_id: this.related.recommend_service,
        ele_letter_type: 1,
        sign_status: 1,
        customer_related_id: this.queryId,
        sign_date: dateFormat(new Date(), 'yyyy年MM月dd日'),
        bank_name: this.related.bank_name,
        customer_name: this.related.customer_name,
        apply_funds: this.related.res_funds,
        apply_funds_capital: nzhToMoney(this.related.res_funds * 10000),
        load_years: this.related.approval_load_years,
        funds_use_dir: this.related.funds_use_dir,
      }
      this.$api.addData(this.$serviceName, 'ele_letter_info', data)
    },
    initData(data) {
      Object.keys(this.data).forEach(key => {
        this.data[key] = data[key] || ''
      })
      this.data.res_funds = +data.res_funds || data.approved_funds
    },
    getRelatedData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, {
          'customer_related_id.eq': this.queryId,
        })
        .then(res => {
          this.related = (res && res.data && res.data.length && res.data[0]) || {}
          this.getReviewData()
          this.initData(this.related)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .approval-opinion {
          min-height: 3rem;
        }
        .flex-1 { flex: 1 }
      `
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.text-indent {
  text-indent: 2rem;
}
.sign-bottom {
  background-color: #ffe;
}
.approval-opinion {
  min-height: 2rem;
}
</style>
